import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";
import { style } from '../../../../theme/style';
import { GLOBAL } from '../../../../config/global';
import { QuantityCpt } from './QuantityCpt';
import { QuantityInputCpt } from './QuantityInputCpt';
import { CheckBoxCpt } from './CheckBoxCpt';
import navigationSeevice from '../../../../components/navigation/navigationSeevice';
import Utils from '../../../../utils/utils.js';


const scale = GLOBAL.SCALE;
export class BigQuantityCpt extends Component {
	constructor(props) {
		super(props);
		let { data, paramsData } = this.props.data || {};
		this.state = {}
		this.showData = { data };
		this.paramsData = paramsData || {};
		this.selectObj = {};
	}

	componentWillMount() {

	}

	//转一下
	_QuantityCallBack = (data) => {
		let { quantityCallBack } = this.props || {};
		console.log('转一下', data)
		quantityCallBack && quantityCallBack(data);
	}

	//
	_checkedCallBack = (callBackData) => {
		let { checkedCallBack } = this.props || {};
		let { index, bigChecked } = callBackData || {};
		this.showData.data.resourceBidOrderList[index].bigChecked = bigChecked;
		console.log('结束', this.showData);
		checkedCallBack && checkedCallBack(this.showData);
	}

	//查看合并
	_findMerge = (params) => {
		navigationSeevice.navigate('ClaimIntention', params)
	}

	render() {
		let { data } = this.showData || {};
		let { resourceBidOrderList, remainQuantity } = data || {};
		return (
			<View>
				{
					resourceBidOrderList && resourceBidOrderList.map((items, index) => {
						return (
							<View style={styles.itemBox} key={index} >
								<View style={styles.itemTop}>
									<View style={[styles.itemHead]}>
										<View style={[styles.statusBox, (items.reportStatusName == "已转订单") ? styles.statusBoxActive : null]}>
											<Text style={styles.statusName}>{items.reportStatusName}</Text>
										</View>
										{(items.mergeType == "MC" || items.mergeType == "MD") ? <Text style={styles.findMerge} onPress={() => { this._findMerge({ bidOrderGroupId: items.bidOrderGroupId, mergeType: items.mergeType, mdmCode: items.mdmCode, bidOrderGroupItemId: items.bidOrderGroupItemId }) }}>【壹化网意向成交明细】</Text> : null}
										{/* {items.reportStatus != '7' && this.paramsData.tranReportType == 'Q' && items.remainQuantity && this.userId == bizStaffId ? <Text style={styles.creatBtn} onPress={() => { this._goOrderPage(data, items.goodsId, items.bidOrderId) }}>创建订单</Text> : null} */}
									</View>
									<CheckBoxCpt data={{ reportStatus: items.reportStatus, goodsName: (items.mergeType == 'MD' ? items.contractName : items.goodsName), bigChecked: items.bigChecked, index }} checkedCallBack={this._checkedCallBack} />
									<View style={[styles.itemCrux, { justifyContent: 'space-between' }]}>
										{items.resourcePrice ? <Text style={[styles.itemPrice, styles.bold]}>报价 ￥{items.resourcePrice} 元 / 吨</Text> : null}
										{items.resourceQuantity ? <Text style={[styles.itemQuantity, styles.bold, { textAlign: 'right' }]}>报量 {items.resourceQuantity} 吨</Text> : null}
									</View>
									{
										items.trademarkId || items.manufacturerName || items.qualityStd ? (
											<View style={styles.TagBox}>
												{items.trademarkId ? <Text style={styles.tags}>{items.trademarkId}</Text> : null}
												{items.manufacturerName ? <Text style={styles.tags}>{items.manufacturerName}</Text> : null}
												{items.qualityStd ? <Text style={styles.tags}>{items.qualityStd}</Text> : null}
											</View>
										) : null
									}
								</View>
								<View style={styles.itemBottom}>
									<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
										<View style={styles.itemBottomItem}>
											<Text style={styles.name}><Text style={styles.require}>* </Text>成交量</Text>
											<Text style={[styles.quantity, styles.bold]}>{items.quantity || '-'}</Text>
											<Text style={styles.unit}>吨</Text>
										</View>
										<Text style={[styles.remaining, { textAlign: 'right' }]}>剩余可转量{items.remainQuantity}吨</Text>
									</View>
									{remainQuantity ? <Text style={[styles.surplus]}>剩余可下单量 {items.remainQuantity}吨</Text> : null}
									<View style={styles.itemBottomItem}>
										<Text style={styles.name}><Text style={styles.require}>* </Text>成交单价</Text>
										<Text style={[styles.quantity, styles.bold]}>{items.price || '-'}</Text>
										<Text style={styles.unit}>元/吨</Text>
										{items.priceType == '2' ? <Text style={[styles.unit, styles.priceType, styles.priceType2]}>暂定价</Text> : <Text style={[styles.unit, styles.priceType, styles.priceType1]}>一口价</Text>}
									</View>
									{
										items.priceType == '2' ? <View style={[styles.itemBottomItem, styles.itemBottomItemActive]}>
											<Text style={styles.name}>结算公式</Text>
											<Text style={[styles.priceTypeDice, styles.bold]}>{items.priceFormlaName || '-'}</Text>
										</View> : null
									}
									{
										items.priceType == '2' ? <View style={[styles.itemBottomItem, styles.itemBottomItemActive]}>
											<Text style={styles.name}>升贴水</Text>
											<Text style={[styles.priceTypeDice, styles.bold]}>{!Utils.isEmpty(items.udPrice) ? items.udPrice : '-'}{Utils.isEmpty(items.udPrice) ? null : '元/吨'}</Text>
										</View> : null
									}
								</View>
								{
									items.bidIntentionOrderList ? <QuantityCpt callBackFn={this._QuantityCallBack} data={{ data: items.bidIntentionOrderList || null }} /> : null
								}
							</View>
						)
					})
				}
			</View>

		)
	}
}
const styles = StyleSheet.create({
	itemBox: {
		width: '100%',
		paddingTop: 15 * scale,
		paddingBottom: 15 * scale,
		backgroundColor: style.color.white,
		marginBottom: 20 * scale,
		borderRadius: 8 * scale
	},
	itemTitle: {
		fontSize: 16 * scale,
		fontWeight: 'bold'
	},
	itemCrux: {
		flexDirection: 'row',
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale,
		position: 'relative'
	},
	itemQuantity: {
		fontSize: 13 * scale,
		color: style.color.themeColor,
		flex: 1
	},
	itemPrice: {
		fontSize: 13 * scale,
		color: style.color.lightRed,
		flex: 1
	},
	TagBox: {
		flexDirection: 'row',
		flexWrap: 'wrap',
		alignItems: 'center',
		marginTop: 5 * scale,
		marginBottom: 20 * scale
	},
	tags: {
		fontSize: 11 * scale,
		backgroundColor: '#E6E9F2',
		paddingLeft: 10 * scale,
		paddingRight: 10 * scale,
		paddingTop: 3 * scale,
		paddingBottom: 3 * scale,
		marginRight: 8 * scale,
		borderRadius: 8 * scale,
		overflow: 'hidden',
		marginTop: 5 * scale
	},
	itemTop: {
		paddingLeft: 15 * scale,
		paddingRight: 15 * scale
	},
	itemBottom: {
		paddingTop: 15 * scale,
		borderTopWidth: 2 * scale,
		borderStyle: 'solid',
		borderTopColor: '#eee',
		marginLeft: 8 * scale,
		marginRight: 8 * scale,
		paddingLeft: 5 * scale,
		paddingRight: 5 * scale
	},
	itemBottomItem: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale
	},
	itemBottomItemActive: {
		alignItems: 'flex-start'
	},
	require: {
		fontSize: 14 * scale,
		color: '#D0021B',
		paddingRight: 15 * scale
	},
	itemHead: {
		flexDirection: 'row',
		justifyContent: 'space-between'
	},
	name: {
		width: 70 * scale,
		fontSize: 13 * scale,
		textAlign: 'right'
	},
	surplus: {
		fontSize: 12 * scale,
		color: style.color.lightRed,
		paddingLeft: 30 * scale,
		marginBottom: 5 * scale
	},
	statusBox: {
		width: 80 * scale,
		height: 24 * scale,
		marginBottom: 12 * scale,
		backgroundColor: '#7FBBFE',
		justifyContent: 'center',
		alignItems: 'center',
		marginLeft: -15 * scale,
		borderTopRightRadius: 6 * scale,
		borderBottomRightRadius: 6 * scale
	},
	statusBoxActive: {
		backgroundColor: '#C7C7C7',
	},
	statusName: {
		fontSize: 13 * scale,
		color: '#fff'
	},
	findMerge: {
		fontSize: 10 * scale,
		color: style.color.themeColor,
		position: 'absolute',
		right: -5 * scale,
		top: 9 * scale
	},
	selectStyle: {
		height: 12 * scale,
		width: 12 * scale,
		marginRight: 6 * scale
	},
	quantity: {
		width: 110 * scale,
		paddingLeft: 25 * scale,
	},
	remaining: {
		color: '#E02020',
		fontSize: 12 * scale,
		marginLeft: 10 * scale
	},
	priceTypeDice: {
		width: 250 * scale,
		paddingLeft: 25 * scale
	},
	unit: {
		fontSize: 12 * scale
	},
	priceType: {
		marginLeft: 15 * scale,
		paddingHorizontal: 3 * scale,
		paddingVertical: 2 * scale,
		fontSize: 11 * scale
	},
	priceType2: { color: '#FA6400', backgroundColor: '#FBEFE8' },
	priceType1: { color: '#85C0EC', backgroundColor: '#ECF7FF' }
})